<!--  -->
<template>
  <div class="home" style="margin-bottom:50px">
    <div class="title">
      <span class="s3" @click="xzks"
        >{{ obj.dq ? obj.dq : "请选择考试" }}<van-icon name="arrow"
      /></span>
      <li class="l3">
        <img @click="ss" src="../assets/搜索.png" alt="" style="width: 25px;height: 25px;padding-right: 20px;">
        <img src="../assets/客服.png" alt="" style="width: 25px;height: 25px;">
        <!-- <van-icon  name="search" size="30" />
        <van-icon
          name="friends-o"
          size="30"
        /> -->
      </li>
    </div>
    <div class="box1" v-if="obj.show">
      <van-popup position="bottom" v-model:show="obj.show">
        <div class="tcc1" v-if="obj.dqxs == 0">
          <p class="p_title" style="font-size: 18px; margin: 20px 0">
            选择考试
          </p>
          <li
            class="li1"
            :class="obj.num == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.list"
            @click="djtcc1(index, item)"
            :key="index"
          >
            <span style="display: block">{{ item.title }}</span>
            <span>{{ item.brief }}</span>
          </li>
        </div>
        <div class="tcc1" v-if="obj.dqxs == 1" style="height: 260px">
          <li class="l2" style="font-size: 14px">
            <span @click="fh" style="margin-top: 10px; font-size: 20px"
              ><van-icon name="arrow-left"
            /></span>
             <!-- <div v-for="(item,index) in obj.list[i]">
               <p class="p_title" style="font-size: 18px; margin: 10px 0">
              {{item.title}}
            </p>
            </div> -->
  <p class="p_title" style="font-size: 18px; margin: 10px 0">
             考研公开课
            </p>
            <span></span>
          </li>
          <li
            :class="obj.num1 == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.lk"
            @click="scc1(index, item)"
            style="height: 30px; line-height: 30px"
            :key="index"
          >
            {{ item }}
          </li>
        </div>
        <div class="tcc1" v-if="obj.dqxs == 2">
          <li class="l2" style="font-size: 14px" >
            <span
              @click="obj.dqxs = 1"
              style="margin-top: 10px; font-size: 20px"
              ><van-icon name="arrow-left"
            /></span>
            <!-- <div v-for="(item,index) in obj.list[0]">
               <p class="p_title" style="font-size: 18px; margin: 10px 0">
              {{item.title}}
            </p>
            </div> -->
            <p class="p_title" style="font-size: 18px; margin: 10px 0">
             考研公开课
            </p>

            <span v-show="obj.wc == true" @click="djwc" class="s1">完成</span>
            <span v-show="obj.wc == false"></span>
          </li>
          <li
            class="lia"
            :class="obj.num2 == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.list1"
            @click="scc2(index, item)"
            :key="index"
            style="height: 30px; line-height: 30px"
          >
            {{ item.major_name }}
          </li>
        </div>
      </van-popup>
    </div>
    <div class="box2" v-if="obj.ttt.length > 0">
      <van-tabs
        v-model:active="obj.active"
        title-active-color="#f26c3d"
        @click-tab="ttb"
      >
      <!-- 0元课 -->
        <van-tab
          v-for="(item, index) in obj.navtab"
          :title="item.title"
          :key="index"
        >
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item2, index2) in obj.lbt" :key="index2"
            
              ><img class="ii" :src="item2.banner_img" alt="" @click="toDetail(item2)"
            /></van-swipe-item>
          </van-swipe>
          <li style="margin: 0 20px;">
            <span
              class="sy"
              v-for="(item1, index1) in item.child"
              :key="index1"
              >{{ item1.title }}</span
            >
          </li>
<!--  -->
  <div class="zhibo" v-for="item in obj.zhibo" :key="item.id">
          <img src="../assets/zhibo.png" alt="" />
          <p>|</p>
          <h5>19:00</h5>
          <span>{{ item.basis_title }}</span>
        </div>

          <img class="img1" src="../assets/下载.png" alt="" />
          <p class="pp">距离考研还有198天</p>
          <!-- 免费直播课 -->
          <div class="mfzb" v-if="obj.active == 0" style="margin-top:10px">
            <li class="nn" style="margin:10px 0;margin-bottom: 20px;">
              <span style="font-weight: 600; font-size: 18px">免费直播课</span>
              <span>查看全部<van-icon name="arrow"/></span>
            </li>
            <div class="ttt">
              <li class="lk" v-for="(item4, index4) in obj.mfzbk" :key="index4" style="font-size:14px" @click="toDetail(id)">
                <img class="ik" :src="item4.teacher[0].avatar" alt="" />
                <li class="pp1">{{ item4.title }}</li>
                <span class="jj">{{item4.price==0?'免费':item4.price/100}}</span>
                <p style="margin:10px 0; color:#f15a24">已有{{item4.sales_num}}人报名</p>
              </li>
            </div>
          </div>
          <!-- 精选 -->
           <div class="mfzb" v-if="obj.active == 0||1" style="margin-top:10px">
            <li class="nn" style="margin:10px 0;margin-bottom: 20px;">
              <span style="font-weight: 600; font-size: 18px">精选</span>
            </li>
            <ul class="jx1" v-for="(item5, index5) in obj.jingxuanList.course_list" :key="index5" @click="toDetail(id)">
              <p class="pp9" style="margin-bottom: 10px;padding-left: 10px;">{{item5.course_classify_title}}</p>
                  <p class="" style="padding-left:15px">{{ item5.title }}</p> 
    <div style="display:flex;align-items:center;font-size: 14px;">
              <li v-for="(aaa,bbb) in item5.teacher.slice(0,3)" :key="bbb" style="margin-bottom: 20px;display: flex;">
    <div style="display:flex;align-items: center;">
         <img style="width:30px;height:30px;border-radius:50%;margin: 10px;" :src="aaa.avatar" alt=""/>{{aaa.teacher_name}}
    </div>
     </li>
    </div>
              <!-- <p >限{{item5.stock_num}}人</p> -->
              <p class="hh" v-if="item5.stock" style="color:#999;padding-left: 20px;">限{{item5.stock}}人</p>
            <div style="padding-left: 20px;display: flex;justify-content: space-between;padding-right: 20px;">
              <span style="color:#999">
                   {{item5.sales_num}}人已报名
              </span>
  <div>
    <!-- <span style="text-decoration:line-through;color: #999;">￥99.00</span> -->
    <!-- <span style="color:red">{{item5.price==0?'免费':item5.price/100}}</span> -->
    <span class="ss1">￥{{item5.vip_price/100}}</span><span class='ss2'>￥{{item5.price/100}}</span>
  </div>
            </div>
             
            </ul>
             
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import {
  getksfl,
  getksfl2,
  gettab,
  getlbt,
  mfzb,
  jingxuan,
} from "../api/homeApi";
const wc = ref(null);
const router = useRouter();
let obj = reactive({
  active: 0,
  show: false,
  list: [],
  list1: [],
  num: 999,
  num1: 999,
  num2: 999,
  dqxs: 0,
  wc: false,
  ttt: [],
  lk: ["在校生", "在职"],
  dq: "",
  id: 23323,
  navtab: [],
  lbt: [],
  // kaid
  cpid: 1,
  mfzbk: [],
  zhibo: [],
  jingxuanList: [],
});
obj.ttt = JSON.parse(localStorage.getItem("ttt")) || [];
if (obj.ttt.length > 0) {
  obj.id = obj.ttt[0].id;
  obj.dq = obj.ttt[0].title;
}
console.log(obj.ttt);
// 点击搜索
const ss = () => {
  router.push("/about");
};
// 点击tab切换
const ttb = () => {
  if (obj.active == 0) {
    obj.cpid = 1;
    mfzb1(obj.cpid);
    jingxuan1(obj.cpid);
  } else {
    obj.cpid = obj.navtab[obj.active].id;
  }
};
// 获取免费直播课
const mfzb1 = async (id) => {
  const res = await mfzb(id);
  console.log("免费直播课", res);
  obj.mfzbk = res.data.data.course_list.slice(0, 3);
  // obj.mfzbk = obj.mfzbk.
  console.log(obj.mfzbk);
};
const zhibo = async (id) => {
  const res = await getzhibo(id);
  console.log("直播", res);
};
// zhibo(fenid.value).then((res) => {
//   // console.log(res)
//   zhiboarr.value = res.data.data;
// });
// 精选
const jingxuan1 = async (id) => {
  const res = await jingxuan(id);
  console.log("精选", res);
  obj.jingxuanList = res.data.data;
  console.log(obj.jingxuanList);
};
// // 点击公开课跳转
//  const tzgkk=()=>{
//    console.log(obj.id);
//    router.push({path:'/gkk',query:{id:obj.id}})
//  }
//
// 点击跳转详情
const toDetail = (i) => {
  router.push({ path: "/detail", query: { id: i.link } });
  console.log(i);
};
// 点击选择考试
const xzks = () => {
  obj.show = true;
  obj.ttt = [];
};
// 点击返回
const fh = () => {
  obj.dqxs = 0;
  obj.list1 = [];
};
// 点击完成
const djwc = () => {
  localStorage.setItem("ttt", JSON.stringify(obj.ttt));
  obj.dq = obj.ttt[0].title;

  obj.show = false;
  obj.dqxs = 0;
  console.log(obj.dq);
  // 请求tab切换数据
  tabqh();
  getlbt1();
};
// 获取轮播图
const getlbt1 = async () => {
  const res = await getlbt();
  obj.lbt = res.data.data;
  console.log(res);
};
const tabqh = async () => {
  const res = await gettab(obj.id);
  console.log(res);
  obj.navtab = res.data.data;
  obj.navtab.unshift({ title: "精选", id: 999 });
  console.log(obj.navtab);
};
// 点击第三组
const scc2 = (i, item) => {
  obj.num2 = i;
  obj.wc = true;
  obj.ttt.push(item);
};
// 点击第二组
const scc1 = (i, item) => {
  obj.num1 = i;
  obj.dqxs = 2;
  obj.num2 = 999;
  obj.ttt.push(item);
  obj.wc = false;
};

// 点击选项高亮+请求
const djtcc1 = async (i, item) => {
  (obj.num1 = 999), (obj.num2 = 999);
  obj.num = i;
  obj.dqxs = 1;
  const res = await getksfl2(item.id);
  obj.ttt.push(item);
  obj.id = item.id;
  console.log(res);
  // obj.dq = item.title;
  obj.list1 = res.data.data;
};
const getfl = async () => {
  const res = await getksfl();
  console.log(res);
  obj.list = res.data.data;
};
if (localStorage.getItem("ttt")) {
  obj.show = false;
  tabqh();
  getlbt1();
  mfzb1(obj.cpid);
  jingxuan1(obj.cpid);
} else {
  obj.show = true;
}
getfl();
</script>
<style lang="scss" scoped>
.jx1 {
  // border: 1px solid #f15a24;
  width: 90%;
  margin: 20px auto;
  background-color: #fafafa;
  /* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink*/
  box-shadow: 10px 10px 20px 10px #ccc;
  border-radius: 40px 20px 20px 20px;
  padding-bottom: 10px;
}
.ss1 {
  text-decoration: line-through;
  color: #ccc;
}
.ss2 {
  color: red;
}
.pp9 {
  background-image: url(../assets/bgi.png);
  background-repeat: no-repeat;
  width: 120px;
  color: #fff;
  text-align: center;
}
.jj {
  display: inline-block;
  padding: 7px 15px;
  background: #f15a24;
  color: #fff;
  border-radius: 15px;
  margin-top: 15px;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.pp1 {
  margin-top: 80px;
  height: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 3;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
.ttt {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  // padding: 10 10px;
  margin-top: 50px;
  margin: 0 8px;
}
.ik {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  border: 1px solid #f18d00;
}
.lk {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 34%;
  justify-content: center;
  align-items: center;
  margin: 3px;
  background: #eaeaea;
  box-sizing: border-box;
  padding: 0 13px;
  padding: 0 10px;
  border-radius: 10px;
}
.nn {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-top: 10px;
}
.sy {
  display: inline-block;
  margin: 10px;
  padding: 15px;
  background: #fff4e5;
  border: #f18d00;
}
.pp {
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  color: #999;
}
.lia {
  padding-top: 10px;
}
.ii {
  height: 300px;
  width: 90%;
  margin: 0 auto;
  border-radius: 20px;
}
:deep(.van-swipe__track) {
  text-align: center;
  margin-top: 15px;
}
.s3 {
  font-size: 25px;
  font-weight: 600;
}
.tcc1 {
  height: 800px;
}
.li1 {
  font-size: 14px;
  text-align: center;
  // padding-top: 10px;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  .van-icon {
    margin-right: 10px;
  }
}
.l3 {
  font-size: 60px;
}
.s1 {
  background: #f15a24;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 15px;
  color: #fff;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.l2 {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 14px;
}
* {
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.van-tab {
  font-size: 16px;
}
:deep(.van-popup) {
  padding: 15px 30px;
  text-align: center;
  box-sizing: border-box;
}
.l1 {
  text-align: center;
  padding: 10px 10px;
  background: #f8f8f5;
  border-radius: 50px;
  margin: 10px;
  height: 80px;
  font-size: 14px;
  padding-top: 10px;
}
.ys {
  background: #f15a24;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  padding: 10px 10px;
  margin: 10px;
  font-size: 18px;
}
.box2 {
  .img1 {
    width: 100px;
    height: 60px;
    text-align: center;
    margin-left: 300px;
  }
}
</style>
